import React, { useCallback, useMemo } from 'react'
import Taro from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { PlanSummaryITF } from '@INTERFACES/PlanManagement'
import HomeBannerExtend from '@COMPONENTS/Banner/HomeBannerExtend'
import { getNavBar, getPlatform, convertPx } from '@UTILS/common'
import { Analytic_Type } from '@CONSTANTS/analytic'
import Images from '@ASSET/Images'
import style from './PlanProgress.module.scss'

const { isWeb } = getPlatform()
interface PlanProgressProps {
  data: PlanSummaryITF
  title: string
  hasMainBanner?: boolean
  virtualHeight?: number
}
interface ItemProps {
  finished: number
  total: string
  title: string
}

const PlanProgress: React.FC<PlanProgressProps> = ({
  data, title, hasMainBanner, virtualHeight = 0
}) => {
  const {
    FinishedTask, TotalTask, Duration, CurrentDay, TotalImportantTask, ViewedImportantTask
  } = data
  const showRemindTask = TotalImportantTask > 0
  const navBar = useMemo(() => getNavBar(), [])
  const dataArr = [
    { title: '周期', finished: CurrentDay, total: `${Duration} 天` },
    {
      title: showRemindTask ? '重要任务数' : '完成任务数',
      finished: showRemindTask ? ViewedImportantTask : FinishedTask,
      total: `${showRemindTask ? TotalImportantTask : TotalTask} 个`
    },
  ]
  const onClick = useCallback(() => {
    Taro.tracker.trackEvent(Analytic_Type.num_plan_task.eventId)
  }, [])
  const containerStyle = isWeb ? {} : { paddingTop: convertPx(navBar.navBarHeight - 2) }
  const headerImageStyle = hasMainBanner ? style.extendImage : style.image
  return (
    <View className={style.container} style={containerStyle} onClick={onClick}>
      <Image src={Images.home.bg_plan_header} className={headerImageStyle} />
      {virtualHeight ? <View className="" style={{ height: (`${virtualHeight}rpx`), width: '100%' }}> </View> : null}
      <View className={style.containerLine} />
      <View className={style.containerClass}>
        <Text className={style.containerTitle}>{title}</Text>
      </View>
      <View className={style.content}>
        {
          dataArr.map(t => <RenderItem key={t.title} {...t} />)
        }
      </View>
      <HomeBannerExtend isPainManage />
    </View>
  )
}

const RenderItem: React.FC<ItemProps> = ({
  finished, total, title,
}) => (
  <View className={style.item}>
    <Text className={style.title}>{`${title}:`}</Text>
    <View className={style.numBox}>
      <Text className={style.finished}>{`${finished ?? 0}`}</Text>
      <Text className={style.total}>{`/${total}`}</Text>
    </View>
  </View>
)

export default PlanProgress
